<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="请设置爆炸时间（秒）" id="ipCount" />
    <p id="pBomb">我有一种不详的预感...</p>
    <button id="btnSet">设置炸弹</button>
    <button id="btnClear">拆除炸弹</button>

    <!-- 点击按钮3秒后定时炸弹爆炸 -->
    <!-- <script>
        var timerId;

        btnSet.onclick = function(){
            timerId = window.setTimeout(

                // 延时执行的业务逻辑
                // 回调函数：将来某时间由系统调用的函数
                function(bomb,n,target){
                    pBomb.innerText = "BOOM!!!"
                    console.log("%s枚%s在%s爆炸",n,bomb,target);
                },

                // 延时的时间(单位毫秒)
                5000,

                "东风快递",10,"小日子过得不错的某岛国"
            )
        }
    
    
        btnClear.onclick = function(){
            clearTimeout(timerId)
            pBomb.innerText = "炸弹已拆除，请继续向老师们好好学习！"
        }
    </script> -->

    <!-- 带有倒计时效果的定时炸弹 -->
    <!-- <script>
      var secondsLeft = 10;

      btnSet.onclick = function () {
        /* 
        设置周期性执行的定时器 
        得到定时器的id —— 用于移除该定时器
        */
        var timerId = setInterval(
          // 每秒回调一次的执行函数
          function () {
            secondsLeft--
            console.log(secondsLeft);

            // 
            if (secondsLeft === 0) {
              // 清除定时器
              clearInterval(timerId)
            }

          },

          //   每1000毫秒回调一次上述函数
          1000,
        );

        console.log("timerId=",timerId);
      };
    </script> -->

    <!-- 综合案例 -->
    <script>
      var clockId;
      var bombId;
      var bombExist = false;

      btnSet.onclick = function () {
        var count = ipCount.value * 1;

        // 设置炸弹
        bombId = window.setTimeout(function () {
          pBomb.innerText = "BOOOOOM!!!";

          //移除计时器
          clearInterval(clockId);
        }, count * 1000);

        // 设置计时器
        clockId = window.setInterval(function () {
          count--;
          pBomb.innerText = count;
        }, 1000);

        // pBomb.innerText = "定时炸弹设置完毕";
        pBomb.innerText = count
        bombExist = true;
      };

      btnClear.onclick = function () {
        if (!bombExist) {
          window.alert("炸弹已拆除！为您推荐爱尔眼科医院");
          // 中断函数执行
          return;
        }

        // 移除炸弹
        window.clearTimeout(bombId);

        // 移除计时器
        window.clearInterval(clockId);

        pBomb.innerText = "定时炸弹已拆除，请继续学习!";
        bombExist = false;
      };
    </script>
  </body>
</html>
